<template>
    <div class="box">
        <h1>学生信息录入</h1>
        <div class="content">
            <div class="warp">
                <el-form ref="form" :model="form" label-width="50px" size="mini">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="学号" prop="stu_id">
                                <el-input v-model="form.stu_id"></el-input>
                            </el-form-item>
                            <el-form-item label="姓名" prop="stu_name">
                                <el-input v-model="form.stu_name"></el-input>
                            </el-form-item>
                            <el-form-item label="性别" prop="stu_sex">
                                <div class="sex">
                                    <el-radio v-model="form.stu_sex" label="男">男</el-radio>
                                    <el-radio v-model="form.stu_sex" label="女">女</el-radio>
                                </div>
                            </el-form-item>
                            <el-form-item label="籍贯">
                                <el-cascader v-model="value" :options="options" :props="{
                                    label: 'name',
                                    value: 'name',
                                }" @change="handleChange"></el-cascader>
                            </el-form-item>
                            <el-form-item label="出生" prop="stu_date">
                                <input type="date" v-model="form.stu_date" />
                            </el-form-item>
                            <el-form-item label="男女" prop="stu_gbf">
                                <input type="text" v-model="form.stu_gbf" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="头像" prop="stu_head_img">
                                <!-- <el-input v-model="form.name"></el-input> -->
                                <!-- <Hand></Hand> -->
                                <div>
                                    <el-button @click="upload">本地头像</el-button>
                                    <el-button @click="gophoto">拍照</el-button>
                                </div>
                                <input type="file" @change="getFile" ref="getInp" hidden>
                                <div>
                                    <img srcset="" width="150px" height="150px" :src="form.stu_head_img" alt="">
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="爱好">
                        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig"
                            :mode="mode" />
                        <div class="wangEditWrap" style="height: 250px; overflow: hidden">
                            <Editor style="height: 500px; overflow-y: hidden;" v-model="html"
                                :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" />
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :plain="true" @click="submit">提交</el-button>
                        <el-button type="primary" :plain="true" @click="goreset">重置</el-button>
                    </el-form-item>
                </el-form>

            </div>
        </div>
    </div>
</template>

<script>
import { req_area } from '@/api/stuinfo.js'
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import request from '@/api/request.js';
// import Hand from '@/components/Hand'
export default {
    components: {
        // Hand,
        Editor, Toolbar
    },
    data() {
        return {
            editor: null,
            html: '<p></p>',
            toolbarConfig: {},
            editorConfig: { placeholder: '请输入内容...' },
            mode: 'default',
            form: {
                stu_id: "",
                stu_name: "",
                stu_sex: "",
                stu_jg: "",
                stu_date: "",
                stu_hobby: "",
                stu_gbf: "",
                stu_head_img: ""
            },
            options: [],
            value: [],
        };
    },
    async mounted() {
        let result = await req_area();
        this.options = result.data;
        this.form.stu_head_img =  this.$route.query.src
    },
    methods: {
        async submit() {
            this.form.stu_hobby = this.editor.getText();
            console.log(this.form);
            let result = await request({
                method: 'post', url: '/student_info', arg: this.form, headerType: 'form'
            });
            console.log(result);
            this.$message({
        message: "数据提交成功！！",
        type: "success",
        offset: 100,
      });
        },
        getFile(){
            console.dir(this.$refs.getInp.files[0]);
            let f = this.$refs.getInp.files[0];
            let fr = new FileReader();
            fr.readAsDataURL(f);
            fr.onload = ()=>{
                console.log(fr.result);
                this.form.stu_head_img = fr.result;
            }
        },
        upload(){
            this.$refs.getInp.click()
        },
        gophoto(){
            this.$router.push({
                name:'photo'
            })
        },
        goreset(){
            this.$refs.form.resetFields();
            this.value = '';
            this.html = '';
            this.$refs.getInp.value =''
        },
        handleChange(value) {
            this.form.stu_jg = value.join("-");
        },
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        beforeDestroy() {
            const editor = this.editor;
            if (editor == null) return;
            editor.destroy(); // 组件销毁时，及时销毁编辑器
        },
    },

}
</script>

<style lang="scss" scoped>
.box {
    h1 {
        text-align: center;
        font-size: 30px;
    }

    .content {
        display: flex;
        justify-content: center;
        align-items: center;

        .warp {
            width: 80%;
        }
    }
}

.sex,
.button,
.hand {
    text-align: center;
}

.el-form-item {
    margin-bottom: 10px;
}
</style>